<template>
  <div class="page-box priceAssessPage">
    <el-row>
      <el-col :span="12" align="left">
        <el-button @click="link('/wy-rent/price/graphic-list')">评估价列表</el-button>
        <el-button type="primary">历史记录</el-button>
      </el-col>
      <el-col :span="12" align="right">
        <el-button type="primary" @click="link('/wy-rent/price/add')">新增评估价</el-button>
        <el-button @click="link('/wy-rent/price/import')">导入</el-button>
        <el-button @click="exportData">导出</el-button>
      </el-col>
    </el-row>
    <el-row class="houseFilter">
      <el-col :span="12">
        <div class="selectFilter">
          <el-select v-model="params.projectId" placeholder="请选择项目" @change="getBuildingList" size="small" filterable>
            <el-option :label="item.project_name" :value="item.project_id" v-for="item in projectList" :key="item.project_id" />
          </el-select>
          <el-select v-model="params.buildingId" placeholder="请选择楼栋" @change="getHouseRentList({current: 1})" size="small">
            <el-option v-for="item in buildingList" :key="item.building_id" :label="item.building_name" :value="item.building_id" />
          </el-select>
        </div>
      </el-col>
      <el-col align="right" :span="12">
        <el-input
          class="searchInput"
          placeholder="搜索物业名称"
          prefix-icon="el-icon-search"
          @change="search"
          clearable
          @clear="getHouseRentList({name:'', current: 1})"
          v-model="params.name"
        ></el-input>
      </el-col>
    </el-row>
    <dataList
      :pageInfo="pager"
      :listData="tableData"
      searchName="name"
      :listLayout="['filter']"
      :filterList="filterList"
      noPadding
      v-loading="loading"
      element-loading-text="数据加载中..."
    >
      <el-table :data="tableData" stripe class="v-table" style="width: 100%">
        <el-table-column prop="propertyName" label="物业名称" width="180" align="center" />
        <el-table-column prop="projectName" label="项目名称" width="180" align="center" />
        <el-table-column prop="buildingArea" label="建筑面积(m²)" align="right" />
        <el-table-column prop="price" label="市场市估价(元/m²/月)" align="right" />
        <el-table-column prop="assessDate" label="评估日期" align="center" />
        <el-table-column prop="validDate" label="有效日期" align="center" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link type="primary" @click="viewInfo(scope.row.rentPriceId)">查看</el-link>
          </template>
        </el-table-column>
      </el-table>
    </dataList>

    <price-info ref="priceInfo1" />
  </div>
</template>

<script>
import {
  fetchPriceList,
  fetchProjectList,
  fetchBuildingList,
} from '../api/rent-price.js'
import priceInfo from './price-info.vue'

export default {
  name: 'rent-price-list',
  components: {
    priceInfo,
  },
  provide () {
    return {
      initList: this.getHouseRentList,
    }
  },
  data () {
    return {
      // 项目列表奥
      projectList: [],
      // 楼栋列表
      buildingList: [],
      // 表格列表数据
      tableData: [],
      // 请求参数
      params: {
        current: 1,
        size: 20,
        name: '',
        projectId: '',
        buildingId: '',
      },
      // 选中的数据
      selectDataArr: [],
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 20, // 每页显示多少条
      },
      // 页面loading
      loading: false,
      // 筛选项
      filterList: [
        {
          label: '评估日期',
          inputType: 'daterange',
          name: ['assessDateStart', 'assessDateEnd'],
        },
        {
          label: '建筑面积(m²)',
          inputType: 'numberRange',
          name: ['buildingAreaStart', 'buildingAreaEnd'],
        },
        {
          label: '评估价(元/m²/月)',
          inputType: 'numberRange',
          name: ['priceStart', 'priceEnd'],
        },
      ],
    }
  },

  mounted: function () {
    // 获取项目列表
    this.getProjectList()
    // 获取调价记录
    this.getHouseRentList()
  },

  methods: {
    // 获取项目列表
    getProjectList () {
      fetchProjectList().then((response) => {
        this.projectList = response.data.data
      })
    },
    // 获取楼栋列表
    getBuildingList () {
      //alert(this.projectId);
      fetchBuildingList({ projectId: this.params.projectId }).then(
        (response) => {
          this.buildingList = response.data.data
          this.getHouseRentList({ current: 1, buildingId: '' })
        }
      )
    },
    //查询定价列表
    getHouseRentList (params = {}) {
      this.loading = true
      let requestData = { ...this.params, ...params }
      fetchPriceList(requestData)
        .then((res) => {
          const { current, size, total, records } = res.data.data
          this.tableData = records
          this.params = requestData
          this.pager = { total, current, size }
        })
        .finally(() => {
          this.loading = false
        })
    },
    //导出调价记录
    exportData () {
      this.publicExport(
        "调价记录",
        "/api/rentprice/houserentprice-download",
        {
          projectId: this.params.projectId,
          buildingId: this.params.buildingId,
          name: this.params.name,
        }
      );
    },

    search () {
      this.getHouseRentList({ current: 1 })
    },
    // 查看详情
    viewInfo (rentPriceId) {
      this.$refs.priceInfo1.show(rentPriceId)
    },
  },
}
</script>

<style lang="scss" scoped>
.priceAssessPage {
  .houseFilter {
    margin-top: 20px;
    .selectFilter {
      display: flex;
      align-items: center;
      .el-select {
        width: 230px;
        margin-right: 10px;
      }
    }
    .searchInput {
      width: 250px;
    }
  }
}
</style>
